<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=utf-8" session="false" %>

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="Cache-Control" content="max-age=7200" />
	    <meta name="author" content="Teddy Long">
	    <!-- Title -->
	    <title>大屯小卖部</title>
		<!-- CSS Load -->
	    <link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet" type="text/css">
	    <link href="<c:url value="/resources/css/bootstrap-theme.min.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/font-awesome.min.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/theme.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/site.css" />" rel="stylesheet" type="text/css">	
		<!-- Icon Image -->
		<link rel="shortcut icon" href="<c:url value="/resources/image/favicon.ico" />" />
		<!-- JavaScript Load -->
	    <script src="<c:url value="/resources/js/ie-emulation-modes-warning.js" />"></script>
	    <script src="<c:url value="/resources/js/html5shiv.min.js" />"></script>
	    <script src="<c:url value="/resources/js/respond.min.js" />"></script>
	</head>
	
	<body role="document">
		<nav class="navbar navbar-inverse navbar-fixed-top">
	    	<div class="container">
		        <div class="navbar-header">
			        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
			          <span class="sr-only">Toggle navigation</span>
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			          <span class="icon-bar"></span>
			        </button>
		        	<a class="navbar-brand" href="#">DTXMB<img style="float:right;margin-left:3px;" height="20" width="20" src="<c:url value="/resources/image/Zombie0.png" />"></a>
		        </div>
		        <c:choose>
			        <c:when test = "${custom.name == null}">
				        <div id="navbar" class="navbar-collapse collapse">
				            <form class="navbar-form navbar-right" action="/signin" method="POST">
				                <div class="form-group">
				                	<input placeholder="Email" name="name" class="form-control" type="text">
				                </div>
				            	<div class="form-group">
				            		<input placeholder="Password" name="pwd" class="form-control" type="password">
				            	</div>
				            	<button type="submit" class="btn btn-success">Sign in</button>
				          	</form>
				    	</div>
			    	</c:when>
			    	<c:otherwise>
				        <div id="navbar" class="navbar-collapse collapse">	        	
				            <form class="navbar-form navbar-right" action="/signout" method="POST">
				            	<span><a href="/shoppingcart"><img src="<c:url value='resources/image/ShoppingCart.png' />" style="margin-bottom:5px;margin-right:-3px;" width="28" height="28"></a></span>
				            	<span id="CartNumber" style="margin-right:3px;vertical-align: middle;font-weight:700;font-size:18px;color:#FFFFFF">${cartnumber}</span>
				               	<span class="alert alert-success" style="margin-right: 10px;padding-bottom: 9px;padding-top: 7px;font-weight: 700;font-size: 14px;"><a href="<c:url value="/mypage" />" >${custom.name}</a></span>
				            	<button type="submit" class="btn btn-danger">Sign out</button>
				          	</form>
				    	</div>
			    	</c:otherwise>
		    	</c:choose>
	        </div>
	    </nav>
	
	<div class="wrap" style="margin-bottom:0px;">
	    <div class="header">
	        <div class="logoimg">
				<img src="<c:url value="resources/image/bg-index.jpg" />" style="display:block;width:100%;height:100%;">
	        </div>
	        <div class="container">
	            <div class="row">
	                <div class="col-xs-12">
	                    <div class="logotxt"><h1><a href="#">DTXMB</a></h1></div>
	                    <h2 class="site-name text-center">大屯小卖部</h2>
	                </div>
	            </div>
	
	        </div>
	    </div>
	</div>
	
	<div class="container theme-showcase" role="main">
	
	    <div class="row">
	        <div class="col-sm-3"></div>
	        <div class="col-sm-6">
	            <input data-toggle="tooltip" data-placement="top" title="Enter Product To Search..." class="form-control" type="text" name="searchTextBox" id="searchTextBox">
	        </div>
	        <div class="col-sm-2">
	            <button  class="btn btn-success btn-block" onclick="showSearchResult()">Search<i style="margin-left: 5px" class="icon-search"></i></button>
	        </div>
	        <div class="col-sm-2" id="SearchResultAlert"></div>
	    </div>
		
	    <div style="margin-top: 30px;margin-bottom: 10px;color:#FFFFFF">Feature Product</div>
     	<div class="page-header" style="margin-top: -12px;margin-bottom: 50px;">
	        <h1 class="label label-info" style="font-size:18px;"></h1>
	    </div>
		<!-- feature product -->
	    <div class="row">	
	    	<c:forEach var="st" items="${products}">
		        <div class="col-md-4" style="text-align:center;">
		          <a href="/product/show/${st.id}" target="_blank"><img class="img-circle" src="${st.image}" alt="${st.name}" height="150" width="150"></a>
		          <h3 style="color:white">${st.name}</h3>
		          <h5 style="color:grey">In Stock: ${st.stock}</h5>
		          <p id='${st.id}' class="btn btn-info addCart" style="padding:3px 6px;font-weight:600; ">Add To Cart</p>
		          <br /><br />
		        </div> 
	        </c:forEach>
	    </div>
	    
	    <div style="margin-top: 30px;margin-bottom: 10px;color:#FFFFFF">Product Category</div>
     	<div class="page-header" style="margin-top: -12px;margin-bottom: 50px;">
	        <h1 class="label label-info" style="font-size:18px;"></h1>
	    </div>
	    <!-- All Categories -->
	     <div class="row">
	    	<c:forEach var="category" items="${categories}">
		        <div class="col-md-3" style="text-align:center;">
		          <a href="/category/show/${category.id}" target="_blank"><img class="img-circle" src="${category.image}" alt="${category.name}" height="150" width="150"></a>
		          <h3 style="color:white">${category.name}</h3>
		          <br /><br />
		        </div> 
	        </c:forEach>
	    </div>
	</div>
	
	<!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript" src="<c:url value="/resources/js/jquery.min.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/jquery.fly.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/my.js" />"></script>
	
	</body>
</html>
